<template>
  <div class="order">
    <!-- 我的订单头部 -->
    <div class="order-header">
      <div class="order-header-content">
        <p>
          <i class="el-icon-s-order" style="font-size: 30px;color: #ff6700;"></i>
          我的地址
        </p>
      </div>
    </div>
    <!-- 我的订单头部END -->
    <!-- <div class="order-id">用户名: {{ user.userName }}</div> -->
    <!-- <div class="order-time">地址: {{this.address}}</div> -->
    <!--<div class="order-time2">省：{{this.address.provence}}</div>-->
    <div class="order-time3">
      <!-- v-if="addrID!=0" -->
      <el-form v-if="addrID != 0" ref="form" :model="form" label-width="395px">
        <el-form-item label="省">
          <el-input v-model=provence id="1" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="市">
          <el-input v-model="city" id="2" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="县">
          <el-input v-model="country" id="3" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="街道">
          <el-input v-model="street" id="4" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(addr_id)">保存</el-button>
          <el-button>
            <router-link to="/address">取消</router-link>
          </el-button>
        </el-form-item>
      </el-form>
      <el-form v-else ref="form" :model="form" label-width="395px">
        <el-form-item label="省">
          <el-input v-model=provence id="1" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="市">
          <el-input v-model=city id="2" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="县">
          <el-input v-model=country id="3" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item label="街道">
          <el-input v-model=street id="4" style="width:500px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit1()">保存</el-button>
          <el-button>
            <router-link to="/address">取消</router-link>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 我的订单主要内容 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      //user: [], // 个人信息
      address: [],//地址信息
      addr_id: '',
      provence: '',
      city: '',
      country: '',
      street: '',
      addrID: ''
    };
  },
  activated() {
    this.addrID = this.$route.query.addrID;
    // 获取已有地址信息数据
    this.$axios
      .post("/api/users/addrInfo/getAddrInfo", {
        user_id: this.$store.getters.getUser.user_id
      })
      .then(res => {
        if (res.data.code === "001") {
          this.address = res.data.addrinfoList;
          //console.log(res.data.address)
          for (let i = 0; i < this.address.length; i++) {
            const temp = this.address[i];
            if (temp.addr_id == this.addrID) {
              this.addr_id = this.address[i].addr_id;
              this.provence = this.address[i].provence;
              this.city = this.address[i].city;
              this.country = this.address[i].country;
              this.street = this.address[i].street;
            }
          }

        } else {
          this.notifyError(res.data.msg);
        }
      })
      .catch(err => {
        return Promise.reject(err);
      });
  },
  methods: {
    onSubmit(addr_id) {
      let add1 = document.getElementById('1').value;
      let add2 = document.getElementById('2').value;
      let add3 = document.getElementById('3').value;
      let add4 = document.getElementById('4').value;
      this.$axios
        .post("/api/users/addrInfo/updateAddrInfo", {
          user_id: this.$store.getters.getUser.user_id,
          addr_id: addr_id,
          provence: add1,
          city: add2,
          country: add3,
          street: add4
        })
        .then(res => {
          switch (res.data.code) {
            case "001":
              // 修改成功
              // 修改列表中的该商品信息
              this.notifySucceed(res.data.msg);
              for (let i = 0; i < this.list.length; i++) {
                const temp = this.list[i];
                if (temp.addr_id == addr_id) {
                  var data = { "id": addr_id, "provence": this.provence, "city": this.city, "country": this.country, "street": this.street };
                  this.list.splice(i, 1, data);
                  break;
                }
              }

              break;
            default:
              // 提示修改失败信息
              this.notifyError(res.data.msg);
          }
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
    onSubmit1() {
      let add1 = document.getElementById('1').value;
      let add2 = document.getElementById('2').value;
      let add3 = document.getElementById('3').value;
      let add4 = document.getElementById('4').value;
      this.$axios
        .post("/api/users/addrInfo/addAddress", {
          user_id: this.$store.getters.getUser.user_id,
          provence: add1,
          city: add2,
          country: add3,
          street: add4
        })
        .then(res => {
          switch (res.data.code) {
            case "001":
              // 修改成功
              // 修改列表中的该商品信息
              this.addr_id = res.data.data.insertId;
              this.onsubmit2();
              //console.log(res.data.data.insertID);
              this.notifySucceed(res.data.msg);
              break;
            default:
              // 提示修改失败信息
              this.notifyError(res.data.msg);
          }
        }
        )
        .catch(err => {
          return Promise.reject(err);
        });
    },
    onsubmit2() {
      this.$axios
        .post("/api/users/addrInfo/addAddrInfo", {
          user_id: this.$store.getters.getUser.user_id,
          addr_id: this.addr_id,
          // provence:add1,
          // city:add2,
          // country:add3,
          // street:add4
        })
        .then(res => {
          switch (res.data.code) {
            case "001":
              // 修改成功
              // 修改列表中的该商品信息
              // this.addr_id=res.data.addr_id;//xuyaoxiug
              this.notifySucceed(res.data.msg);
              break;
            default:
              // 提示修改失败信息
              this.notifyError(res.data.msg);
          }
        }
        )
        .catch(err => {
          return Promise.reject(err);
        });
    }
  }
};

</script>

<style>
.order {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

/* 我的订单头部CSS */
.order .order-header {
  height: 64px;
  border-bottom: 2px solid #ff6700;
  background-color: #fff;
  margin-bottom: 20px;
}

.order .order-header .order-header-content {
  width: 1225px;
  margin: 0 auto;
}

.order .order-header p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}
</style>